{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

<form class="form-horizontal" action="" method="post" name="form">
    {{ ivr.node_name()  }}
    <div class="form-group">
        <label for="form_phone_line" class="col-sm-3 control-label no-padding-right">{{ "Phone line"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_phone_line" name="form[phone_calss]" class="col-sm-6">
                {% for key, phone_line in phone_line %}
                    <option value="{{ key }}">
                        {{ phone_line|trans }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="form_phone_type" class="col-sm-3 control-label no-padding-right">{{ "Phone type"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_phone_type" name="form[transfer_type]" class="col-sm-6">
                {% for key, phone_type in phone_type %}
                    <option value="{{ key }}">
                        {{ phone_type|trans }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "phone type help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div id="form_phone_num_div" class="form-group">
        <label for="form_phone_num" class="col-sm-3 control-label no-padding-right">{{ "Fixed phone num"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <input type="text" id="form_phone_num" name="form[phone_num]" required="required" class="col-sm-6">
        </div>
    </div>
    <div id="form_variable_name_div" class="form-group">
        <label for="form_variable_name" class="col-sm-3 control-label no-padding-right">{{ "Variable names"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_variable_name" class="col-sm-6">
                <option value="">{{ 'Please Selected Variable'|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "node phone variable name help"|trans }},{{ 'system variable name help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div class="form-group">
        <label for="form_caller_type" class="col-sm-3 control-label no-padding-right">{{ "Caller type"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_caller_type" name="form[caller_type]" class="col-sm-6">
                {% for key, ctype in caller_type %}
                    <option value="{{ key }}">
                        {{ ctype|trans }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "phone type help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div id="form_caller_num_div" class="form-group">
        <label for="form_caller" class="col-sm-3 control-label no-padding-right">{{ "Caller"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_caller" name="form[caller]" class="col-sm-6">
                {% for key, caller in caller %}
                    <option value="{{ key }}">
                        {{ caller }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div id="form_caller_variable_name_div" class="form-group">
        <label for="form_caller_variable_name_div" class="col-sm-3 control-label no-padding-right">{{ "Caller Variable name"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_caller_variable_name" class="col-sm-6">
                <option value="">{{ 'Please Selected Variable'|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "node phone variable name help"|trans }},{{ 'system variable name help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.jump_nodes(nodes,'Transfer Fail Jump Node') }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
</form>
<script type="application/javascript">
    $(document).ready(function(){
        setVariableOption($("#form_variable_name"));
        setVariableOption($("#form_caller_variable_name"));
        $('#form_phone_type').on('change', function() {
            form_phone_type();
        });

        $('#form_caller_type').on('change', function() {
            form_caller_type();
        });

        $('#form_phone_line').on('change', function() {
            form_phone_line();
        });
    });

    function form_phone_line(){
        var value = $('#form_phone_line').val();
        var $form_caller_div = $("#form_caller_div");

        switch(true){
            case value == 0:
                $form_caller_div.removeClass('hidden');
                break;
            case value == 1:
                $form_caller_div.addClass('hidden');
                break;
        }
    }
    function form_phone_type(){

        var value = $('#form_phone_type').val();
        var $form_phone_num_div = $("#form_phone_num_div");
        var $form_variable_name_div = $("#form_variable_name_div");
        switch(value){
            case 'fixed':
                $form_phone_num_div.removeClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
            case 'variable':
                $form_phone_num_div.addClass('hidden');
                $form_variable_name_div.removeClass('hidden');
                break;
        }
    }

    function form_caller_type() {
        var value = $('#form_caller_type').val();
        var $form_phone_num_div = $("#form_caller_num_div");
        var $form_variable_name_div = $("#form_caller_variable_name_div");
        switch(value){
            case 'select':
                $form_phone_num_div.removeClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
            case 'caller_variable':
                $form_phone_num_div.addClass('hidden');
                $form_variable_name_div.removeClass('hidden');
                break;
        }
    }
</script>
